import color from 'css-color-function';

import config from '../../app.config';

const themeColors = config.themeColors;
const textColors = config.textColors;

const $namespace = import.meta.env.VITE_APP_NAME_SPACE;

type ColorsType = {
  [key: string]: string
}

/**
 * @description: 设置主题颜色
 * @param {ColorsType} colors 主题颜色集
 */
export const setThemeColor = (colors: ColorsType = themeColors) => {
  const el = document.documentElement;
  for (const key in colors) {
    if (Object.prototype.hasOwnProperty.call(colors, key)) {
      el.style.setProperty(`--${$namespace}-color-${key}`, colors[key]);

      for (let i = 1; i <= 9; i++) {
        el.style.setProperty(
          `--${$namespace}-color-${key}-light-${i}`,
          color.convert(`color(${colors[key]} tint(${(i / 10) * 100}%))`)
        );
        el.style.setProperty(
          `--${$namespace}-color-${key}-dark-${i}`,
          color.convert(`color(${colors[key]} shade(${(i / 10) * 100}%))`)
        );
      }
    }
  }
};

/**
 * @description: 设置字体颜色
 * @param {ColorsType} colors 字体颜色集
 */
export const setTextColor = (colors: ColorsType = textColors) => {
  const el = document.documentElement;
  for (const key in colors) {
    if (Object.prototype.hasOwnProperty.call(colors, key)) {
      el.style.setProperty(`--${$namespace}-text-color-${key}`, colors[key]);
    }
  }
};
